<script setup lang="ts">
  import {
    queryRolesList,
    queryRolePermissionsIds,
    addStaffRole,
    setUserPermissionScope,
    queryUserPermissionScope,
  } from '@/api/system/role';
  import { queryList } from '@/api/organization/nursing-home';
  import { queryStaffAccountInfo } from '@/api/system/user';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  // import PermissionTree from '@/components/permission-tree/index.vue';
  import { ref } from 'vue';
  import { useSkeleton } from '@/hooks/arco/useSkeleton';
  import { useRoute } from 'vue-router';
  import { useAutoRequest } from '@/hooks/arco/useAutoLoading';
  import { Message } from '@arco-design/web-vue';

  const route = useRoute();

  const staffId = route.query.id as string;

  const checkAll = ref(false);

  const checkedInstBranchArr = ref([]);

  const roles = ref([]);

  const permissions = ref<string[]>([]);

  const onRoleChange = () => {
    // console.log(form.state.roles);
    if (!roles.value || roles.value.length === 0) {
      permissions.value = [];
      return;
    }
    queryRolePermissionsIds(roles.value.join(',')).then((data) => {
      permissions.value = data;
    });
  };

  const renderAccount = (data: any) => {
    return [
      {
        label: 'ID',
        value: data.userid,
      },
      {
        label: '账号',
        value: data.accountNo,
      },
      {
        label: '状态',
        value: data.statusLabel,
      },
      {
        label: '归属人',
        value: data.staffName,
      },
      {
        label: '关联手机号',
        value: data.staffName,
      },
      {
        label: '创建时间',
        value: data.createTime,
      },
      {
        label: '最近登录时间',
        value: data.lastLoginTime,
      },
      {
        label: '最近登录地点',
        value: data.lastLoginIp,
      },
    ];
  };

  const accountSkeleton = useSkeleton({
    initQueryParams: [staffId],
    apiFun: queryStaffAccountInfo,
    transformDataFun(data) {
      roles.value = data.roleIds;
      return renderAccount(data);
    },
  });

  const scopeSkeleton = useSkeleton({
    initQueryParams: [staffId],
    apiFun: queryUserPermissionScope,
    onSuccess(data) {
      checkAll.value = data.scopeType === 1;
      checkedInstBranchArr.value = data.branchIds;
    },
  });

  /**
   * await setUserPermissionScope({
        userid: staffId,
        scopeType: checkAll.value ? 1 : 2,
        branchIds: checkAll.value ? [] : checkedInstBranchArr.value,
      });

      return addStaffRole({
        staffId,
        roleIds: form.state.roles.join(','),
      });
   */

  const [savePermissionLd, savePermission] = useAutoRequest(
    () => {
      return addStaffRole({
        staffId,
        roleIds: roles.value.join(','),
      });
    },
    {
      onSuccess() {
        Message.success('保存成功');
      },
    }
  );

  const [saveDataScopeLd, saveDataScope] = useAutoRequest(
    () => {
      return setUserPermissionScope({
        userid: staffId,
        scopeType: checkAll.value ? 1 : 2,
        branchIds: checkAll.value ? [] : checkedInstBranchArr.value,
      });
    },
    {
      onSuccess() {
        Message.success('保存成功');
      },
    }
  );

  const roleSelect = useSelectOption({
    apiFun: queryRolesList,
    fieldNames: {
      value: 'roleId',
      label: 'roleName',
    },
  });

  const instBranchSelect = useSelectOption({
    apiFun: queryList,
  });
</script>

<template>
  <div class="flex flex-col gap-5 h-full overflow-y-auto">
    <div class="card gap-2">
      <div class="flex justify-between">
        <h2>账号信息</h2>
        <ae-button purpose="edit"> 编辑 </ae-button>
      </div>
      <skeleton-view v-slot="{ data }" v-bind="accountSkeleton.bindProps">
        <a-descriptions :data="data" :column="{ xs: 1, md: 2, lg: 3 }" />
      </skeleton-view>
    </div>

    <div class="card gap-2">
      <div class="flex justify-between">
        <h2>角色权限</h2>
        <ae-button
          purpose="save"
          :loading="savePermissionLd"
          @click="savePermission"
        >
          保存
        </ae-button>
      </div>
      <a-select
        v-bind="roleSelect.bindProps"
        v-model="roles"
        style="width: 300px"
        multiple
        @change="onRoleChange"
      />

      <!-- <PermissionTree :disabled="true" :checked-keys="permissions" /> -->
    </div>

    <div class="card gap-2">
      <div class="flex justify-between">
        <h2>数据权限</h2>
        <ae-button
          purpose="save"
          :loading="saveDataScopeLd"
          @click="saveDataScope"
        >
          保存
        </ae-button>
      </div>
      <skeleton-view v-bind="scopeSkeleton.bindProps">
        <div class="flex flex-col gap-2">
          <a-checkbox v-model="checkAll">全部院区</a-checkbox>
          <a-checkbox-group v-model="checkedInstBranchArr" :disabled="checkAll">
            <a-checkbox
              v-for="(item, index) in instBranchSelect.bindProps.data"
              :key="index"
              :value="item.id"
            >
              {{ item.name }}
            </a-checkbox>
          </a-checkbox-group>
        </div>
      </skeleton-view>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
